<template>
  <div id="container">
    <ul class="line" v-if="clickflag">
      <li class="line-item-menu" v-for="item in perlist" :key="item.id">
        <h3 class="tips">{{ item.name }}</h3>
        <ul class="line-row-vox">
            <li class="row-item"   :key="idx.id"  v-for="idx in item.Children">
              <p @click="getUrl(idx)" style="cursor: pointer"   >{{ idx.name }}</p>
            </li>
        </ul>
      </li>
    </ul>
    <ul
      v-else
      class="cloum"
      :style=" listData.length > 0 && listData[0].name == '人事工作台' ? 'width:540px' : '' "
    >
      <li v-for="item in listData" :key="item.id" class="row-item">
        <h3 class="tips" v-if="item.status">{{ item.name }}</h3>
        <p v-else @click="getUrl(item)" style="cursor: pointer">
          {{ item.name }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "menupersonnel",
  props: {
    clickflag: {
      type: Boolean,
    },
    mylistmenu: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      perlist: [], //横向排列
      listData: [], //纵向排列
    };
  },
  watch: {
    mylistmenu: {
      handler(newval, oldval) {
        this.perlist = JSON.parse(JSON.stringify(newval));
        this.getcolum(newval);
      },
      deep: true,
    },
  },
  methods: {
    getUrl(row) {
      this.$emit("ongetUrl", row);
    },
    getcolum(myArray) {
      let arrData = JSON.parse(JSON.stringify(myArray));
      let datalist = [];
      arrData.forEach((item) => {
        item.status = true;
        datalist.push(item);
        if (item.Children && item.Children.length > 0) {
          item.Children.forEach((idx) => {
            idx.status = false;
            datalist.push(idx);
          });
        }
      });
      this.listData = datalist;
    },
  },
};
</script>
<style scoped lang="less">
#container {
  width: auto;
  max-width: 600px;
  max-height: 73vh;
  padding: 0px 20px 20px 20px;
  .tips {
    position: relative;
    padding-left: 14px;
    line-height: 40px;
    font-weight: 700;
    color: #090909;
  }
  .tips::after {
    position: absolute;
    /*绝对定位*/
    top: 18px;
    /*Y轴方向偏移自身高度的50%*/
    transform: translatey(-40%);
    /*Y轴方向偏移微调*/
    left: 0;
    /*紧靠容器左边缘*/
    content: "";
    /*伪元素需要有内容才能显示*/
    width: 4px;
    /*伪元素宽度*/
    height: 16px;
    /*伪元素高度*/
    background-color: #3aadf6;
    /*伪元素颜色*/
  }

  .line {
    .line-item-menu {
      margin-top: 10px;

      .line-row-vox {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .row-item {
          width: 180px;
          height: 32px;
          line-height: 32px;
          &:hover {
            background-color: #92dbab;
            color: #fff;
          }
          p {
            text-indent: 1em;
          }
        }
      }
    }
  }

  .cloum {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    .row-item {
      width: 180px;
      // margin-right: 10px;
      p {
        width: 180px;
        height: 32px;
        line-height: 32px;
        text-indent: 1em;
      }
      p:hover {
        background-color: #92dbab;
        color: #fff;
      }
    }
  }
}
</style>